<template>
  <div class="e-wrap">
    <!-- 导航列表 -->
    <div class="e-filter-list">
      <div class="e-add clearfix">
          <w-button @on-click='editNav'>新增导航</w-button>
      </div>
      <!-- 列表数据 -->
      <div class="e-list clearfix" v-if="navList.totalCount">
        <table>
            <tr class="table-h">
              <th>排序</th>
              <th>导航标题名称</th>
              <th>显示</th>
              <th>操作</th>
            </tr>
            <tr v-for='(val, index) in navList.recordList' :key="index">
              <td>{{val.orders}}</td>
              <td>{{val.titleName}}</td>
              <td>{{val.isview == '1' ? '是' : '否'}}</td>
              <td>
                <span class="cur" @click='editNav(val)'>编辑 |</span>
                <span class="cur" @click="delPanel = true; delParams.idList = [Number(val.id)]">删除</span>
              </td>
            </tr>
        </table>
        <!-- 分页 -->
        <div class="fr" style="margin-top: 55px">
          <w-paging :current="navList.currentPage" :total="navList.pageCount" @on-page='changePage'></w-paging>
        </div>
      </div>
      
      <!-- 无数据 -->
      <div class="e-list" v-else>
        <table>
            <tr class="table-h">
              <th>排序</th>
              <th>导航标题名称</th>
              <th>显示</th>
              <th>操作</th>
            </tr>
            <tr>
              <td colspan='4'>暂无数据</td>
            </tr>
        </table>
      </div>
    </div>

    <!-- 新增导航 -->
    <w-panel-validate v-model="addPanel"  :panel-title="true" :title='`${addParams.id ? "修改" : "新增"}导航`' :width="`460px`" :height="`460px`" @on-confirm='submitOption'>
      <div class="panel-nav">
        <div class="e-item">
          <span class="title">名称</span>
          <div class="dis-block">
            <w-input :holder="`请填写`" v-model='addParams.titleName' rule="isEmpty" error="*此项必填"></w-input>
          </div>
        </div>
        <div class="e-item">
          <span class="title">排序序号</span>
          <div class="dis-block">
            <w-input :holder="`请填写`" v-model='addParams.orders' rule="isEmpty" error="*此项必填"></w-input>
          </div>
        </div>
        <div class="e-item">
          <span class="title">所属频道</span>
          <div class="dis-block">
            <w-select :defaultSe='false' :options='channelList' v-model="addParams.chId"></w-select>
          </div>
        </div>
        <div class="e-item">
          <span class="title">是否显示</span>
          <div class="dis-block">
            <w-switch v-model='isview' @on-change='changeSwitch'></w-switch>
          </div>
        </div>
      </div>
    </w-panel-validate>

    <!-- 删除导航 -->
    <w-panel-fixed-wrap v-model="delPanel"  :panel-title="true" title="删除导航" :width="`260px`" :height="`200px`" @on-confirm='delOption'>
      <div class="panel-classify">
        是否确认删除该导航
      </div>
    </w-panel-fixed-wrap>
  </div>
</template>

<script>
import { apiDecorateMange } from 'js/api'
import { mapGetters, mapActions } from 'vuex'

export default {
  data() {
    return {
      addPanel: this.$route.query.three == 'pc',
      delPanel: false,
      isview: true,
      // 查询导航列表 -- 参数
      queryParams: {
        accessToken: '',
        threeMenuCode: this.$route.query.three || '',
        currentPage: 1,
        showCount: 10
      },
      navList: [],
      // 删除 导航 -- 参数
      delParams: {
        accessToken: '',
        threeMenuCode: this.$route.query.three || '',
        idList: []
      },
      // 新增/编辑 导航 -- 参数
      addParams: {
        accessToken: '',
        threeMenuCode: this.$route.query.three || '',
        id: '',
        titleName: '',
        orders: '',
        chId: '',
        isview: 1
      },
      // 获取导航信息 -- 参数
      getParams: {
        accessToken: '',
        threeMenuCode: this.$route.query.three || '',
        id: this.$route.query.id || ''
      }
    }
  },
  computed: {
    ...mapGetters(['token', 'channelList'])
  },
  created() {
    this._getNavList()
    this.fetchChannelList({token: this.token, terminal: 'PC', three: this.$route.query.three})
    if (this.$route.query.id) {
      this._getNavInfo()
    }
  },
  methods: {
    ...mapActions(['fetchChannelList']),
    // 获取导航列表
    _getNavList() {
      this.queryParams.accessToken = this.token
      apiDecorateMange.getNavList(this.queryParams).then(data => {
        if (data.code != 200) return
        this.navList = data.data
      })
    },
    // 删除
    delOption() {
      this.delParams.accessToken = this.token
      apiDecorateMange.delNav(this.delParams).then(data => {
        if (data.code != 200) return
        this.$toast('删除成功', () => {
          this.delPanel = false
          this.changePage(1)
        })
      })
    },
    changePage(page) {
      this.queryParams.currentPage = page
      this._getNavList()
    },
    changeSwitch(flag) {
      if (flag == 'false') {
        this.isview = false
      } else {
        this.isview = true
      }
    },
    editNav(data) {
      this.addPanel = true
      this.isview = data ? Boolean(data.isview) : true
      this.addParams.id = data ? data.id : ''
      this.addParams.titleName = data ? data.titleName || '' : ''
      this.addParams.orders = data ? String(data.orders) : ''
      this.addParams.chId = data ? data.chId || '' : ''
    },
    // 获取导航信息
    _getNavInfo() {
      this.getParams.accessToken = this.token
      apiDecorateMange.getNavInfo(this.getParams).then(data => {
        if (data.code != 200) return
        this.editNav(data.data)
      })
    },
    // 新增导航
    submitOption() {
      if (!this.addParams.chId) {
        this.$toast('请选择频道')
        return
      }
      this.addParams.accessToken = this.token
      this.addParams.isview = Number(this.isview)
      this.addParams.orders = Number(this.addParams.orders)
      this.addParams.chId = Number(this.addParams.chId)
      apiDecorateMange.addNav(this.addParams).then(data => {
        if (data.code != 200) return
        this.$toast(`${this.addParams.id ? '修改' : '新增'}成功`, () => {
          if (this.$route.query.three == 'pc') {
            this.$router.go(-1)
          } else {
            this.addPanel = false
            this._getNavList()
          }
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import '../../scss/_var.scss';
@import '../../scss/_comment.scss';
.e-item {
    margin-left: 0;
    margin-right: 20px;
    margin-bottom: 20px;
    .title {
        width: 76px;
    }
    .dis-block {
        width: 240px;
    }
}
.e-filter-list {
    width: 100%;
    .e-add {
      margin: 20px 0;
    }
}
</style>